<template>
	<view>
		<div ref="echarts-one" style="height: 600px;width: 1000px;" class="echarts-bar"></div>
		<div ref="echarts-day" style="height: 600px;width: 1000px;" class="echarts-bar"></div>
	</view>
</template>

<script>
import * as echarts from 'echarts';
const db = uniCloud.database();
const mont= ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'];
// 表查询配置
const dbCollectionName = 'uni-id-users';
export default {
	data() {
		let data = [];
		for (let i = 0; i <= 360; i++) {
			let t = (i / 180) * Math.PI;
			let r = Math.sin(2 * t) * Math.cos(2 * t);
			data.push([r, i]);
		}
		return {
			monthArr:mont,
			echartsObj: {},
			echartsOption: {
				title: {
					text: '当年注册护工计',
					top: 'top',
					left: 'left',
					textStyle: {
						fontSize: 14,
						fontWeight: '',
						color: '#333'
					}
				}, // 标题
				xAxis: {
					type: 'category',
					data:mont
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			},
			echartsDayObj:{},
			echartsDayOption: {
				// title: {
				// 	text: '当月注册护工统计',
				// 	top: 'top',
				// 	left: 'left',
				// 	textStyle: {
				// 		fontSize: 14,
				// 		fontWeight: '',
				// 		color: '#333'
				// 	}
				// }, // 标题
				title: {
					text: '当月注册护工统计',
					top: 'top',
					left: 'left',
					textStyle: {
						fontSize: 14,
						fontWeight: '',
						color: '#333'
					}
				}, // 标题
				xAxis: {
					type: 'category',
					data:[]
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						label: {
							show: true,
							position: 'inside'
						},
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			}
		};
	},
	mounted() {
		//this._initEcharts();
		this.sticYearData();
		this.sticMonyData();
	},
	methods: {
		// 当年每月统计数量 
		async sticYearData() {
			// var date = new Date(),
			//  y = date.getFullYear(),
			//   m = date.getMonth();
			// var firstDay =Date.UTC(y,m,1,0,0,0,0);
			// var lastDay = date.setTime(y, m + 1,0, 23,59,59,999);
			// console.log(firstDay,lastDay)
			// return false;
			// var strtime = '2014-04-23 00:00:00:000';
			// var dateto = Date.parse(strtime);
			const $ = db.command.aggregate
			const list = await db
				.collection(dbCollectionName)
				.where('role=="paramedic"')
				.where('register_date <new Date().getTime()')
				.groupBy('dateToString(add(new Date(0),register_date),"%Y%m","+0800") as date')
				.groupField('count(*) as numb')
				.get();
			let staticArr=[]
			console.log(list)
			const monthArr=this.monthArr
			for(let i in monthArr){
				list.result.data.forEach(mon=>{
					let st='0';
					if(monthArr[i].length==2){
						st=''
					}
					if('2021'+st+monthArr[i]===mon.date){
						staticArr[i]=mon.numb
					}else{
						staticArr[i]=0					}
				});
			}
			console.log(staticArr,'----------->')
			this.echartsOption.series=[{
						data: staticArr,
						type: 'bar',
						showBackground: true,
						label: {
							show: true,
							position: 'inside'
						},
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}];
					this._initEcharts()
		},
		// 当月每天注册数量
		async sticMonyData() {
			var date = new Date(),
			 y = date.getFullYear(),
			  m = date.getMonth(),
			  day=(new Date(y,m,0)).getDate();
			  m=m+1
			const $ = db.command.aggregate
			const list = await db
				.collection(dbCollectionName)
				.where('role=="paramedic"')
				.where('register_date <new Date().getTime()')
				.groupBy('dateToString(add(new Date(0),register_date),"%Y%m%d","+0800") as date')
				.groupField('count(*) as numb')
				.get();
			let staticArr=[]
			m=m.toString()
			if(m.length==1){
				m="0"+m;
			}
			let axday=[]
			for(let i=1;i <= day;i++){
				axday.push(i)
				list.result.data.forEach(mon=>{
					let st='0';
					if(i.length==2){
						st=''
					}
					if(y+m+st+i==mon.date){
						staticArr[i]=mon.numb
					}else{
						staticArr[i]=0		
					}
				});
			}
			console.log(axday)
			this.echartsDayOption.xAxis.data= {
					type: 'category',
					data:axday
				}
			this.echartsDayOption.series=[{
					data: staticArr,
					type: 'bar',
					showBackground: true,
					label: {
						show: true,
						position: 'inside'
					},
					backgroundStyle: {
						color: 'rgba(180, 180, 180, 0.2)'
					}
			}];
			this._initDayEcharts()
		},
		//当天
		async sticDayData() {
			var date = new Date();
			date.setDate(1);
			var month = parseInt(date.getMonth() + 1);
			var day = date.getDate();
			if (month < 10) {
				month = '0' + month;
			}
			if (day < 10) {
				day = '0' + day;
			}
			console.log(date.getFullYear() + '-' + month + '-' + day);
			console.log(1234);
			
			var strtime = '2014-04-23 00:00:00:000';
			var dateto = Date.parse(strtime);
			console.log(dateto)
		
			const list = await db
				.collection(dbCollectionName)
				.where('role=="paramedic"')
				.where('register_date <new Date().getTime()')
				.groupBy('dateToString(add(new Date(0),register_date),"%Y-%m-%d","+0800") as date')
				.groupField('count(*) as numb')
				.get();
		},
		_initEcharts() {
			this.echartsObj = echarts.init(this.$refs['echarts-one']);
			this.echartsObj.setOption(this.echartsOption);
		},
		_initDayEcharts() {
			this.echartsDayObj = echarts.init(this.$refs['echarts-day']);
			this.echartsDayObj.setOption(this.echartsDayOption);
		}
	}
};
</script>
<style>
/**
 * The default size is 600px×400px, for responsive charts
 * you may need to set percentage values as follows (also
 * don't forget to provide a size for the container).
 */
.echarts {
	width: 100%;
	height: 100%;
}
</style>
